import Qt 4.7
import "../js/Delegate.js" as Delegate
import "../js/Engine.js" as Engine
import "../"
import "../js/G.js" as G

Item {
    id: spotsDelegate
    height: 70
    width: spotsDelegate.ListView.view.width

    property string token: gToken

    // Pull-to-reload
    Image {
        id: logoImage2
        source: "../Images/refresharrow.png"
        anchors.bottom: parent.top
        anchors.bottomMargin: 10
        anchors.horizontalCenter: parent.horizontalCenter
        smooth: true
        visible: index == 0
        opacity: -spotsList.contentY > 10 ? 1 : 0
        Behavior on opacity { NumberAnimation { duration: 100  } }
        z: 2
        rotation: {
            var myY = - spotsList.contentY * 3;
            if (myY > 280) {
                spotsList.state = "loadingSpots";
            }

            if (myY > 130) {
                myY = 180;
            } else {
                myY = 0;
            }

            return -myY;
        }
        Behavior on rotation { NumberAnimation { duration: 150 } }
    }
    //


    Image {
        id: background
        width: parent.width
        height: parent.height;
        source: "../Images/macapp_cellbg.png"
        smooth: true
        fillMode: Image.Stretch
        anchors.top: parent.top
    }


    MouseArea {
        id: mouseAreaCell
        anchors.fill: parent
        onClicked: console.log("cell selected");
    }

    Text {
        id: textSpotName
        anchors.leftMargin: 20
        anchors.topMargin: 10
        anchors.left: parent.left
        anchors.top: parent.top
        anchors.right: parent.right
        anchors.rightMargin: 20
        text: spotName
        wrapMode: Text.WordWrap
        smooth: true

        font { bold: true; family: "Helvetica"; pixelSize:18 }
        color: "#FFFFFF"
    }


    Text {
        id: textTags
        anchors.leftMargin: 20

        anchors.left: parent.left
        anchors.top: parent.top
        anchors.topMargin: 70 / 2 + 10 // do not bind with height as it is going to change
        anchors.right: parent.right
        anchors.rightMargin: 20
        text: spotTags
        font { bold: false; pixelSize:10; italic: true }
        color: "#ffffff"
        smooth: true
        wrapMode: Text.WordWrap
    }

    states: [
        State {
            name: "Expanded"
            when: mouseRegion.pressed == true
            PropertyChanges { target: plusButtonUp; opacity: 0 }
            PropertyChanges { target: plusButtonDown; opacity: 1 }
            PropertyChanges { target: spotsDelegate; height: 140 }
            PropertyChanges { target: buttonAddToCollection; opacity: spotInCollection ? 0 : 1 }
            PropertyChanges { target: buttonRemoveFromCollection; opacity: spotInCollection ? 1 : 0 }
        }
    ]

    Behavior on height {
        NumberAnimation { duration: 150; }
    }


    Image {
        id: plusButtonUp
        anchors.right: parent.right
        anchors.rightMargin: 20
        anchors.top: parent.top
        anchors.topMargin: 70 / 2 - height / 2 // do not bind with height as it is going to change
        //anchors.verticalCenter: parent.verticalCenter
        source: "../Images/btn_plus_up.png"
        smooth: true
        opacity: 1
        visible: {
            G.isLoggedIn(token);
        }
    }

    Image {
        id: plusButtonDown
        anchors.right: parent.right
        anchors.rightMargin: 20
        anchors.top: parent.top
        anchors.topMargin: 70 / 2 - height / 2 // do not bind with height as it is going to change
        source: "../Images/btn_plus_down.png"
        smooth: true
        opacity: 0
    }

    MouseArea {
        anchors.fill: plusButtonUp
        onClicked: {
            if (G.isLoggedIn(token)) {
                if (spotsDelegate.state != "Expanded") {
                    loadSpotWorker.sendMessage({'spotId': spotId, 'token': token})
                    spotsDelegate.state = "Expanded"
                } else {
                    spotsDelegate.state = ""
                }
            }
        }
    }

    WorkerScript {
             id: loadSpotWorker
             source: "../js/SpotLoader.js"
             onMessage: {
                 G.log("Address receiver: " + messageObject.spotAddress);
                 textAddress.text = messageObject.spotAddress;
             }
         }

    Text {
        id: textAddress
        anchors.top: parent.top
        anchors.topMargin: 70
        anchors.left: parent.left
        anchors.leftMargin: 20
        text: ""
        color: 'white'
        font { bold: false; pixelSize:12; italic: false }
        smooth: true
    }

    Image {
        id: buttonAddToCollection
        source: "../Images/add_collection.png"
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 10
        opacity: 0
        Behavior on opacity { NumberAnimation { duration: 150 } }
        MouseArea {
            anchors.fill: parent
            onClicked: {
                console.log(token);
                addToCollectionWorker.sendMessage({'spotId': spotId, 'token': token});
            }
        }

        WorkerScript {
                 id: addToCollectionWorker
                 source: "../js/AddToCollection.js"
                 onMessage: {
                     G.log("Added: " + messageObject.added);
                     buttonAddToCollection.opacity = 0;
                     buttonRemoveFromCollection.opacity = 1;
                     spotsList.model.setProperty(index, "spotInCollection", true);
                 }
             }
    }

    Image {
        id: buttonRemoveFromCollection
        source: "../Images/in_collection.png"
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 10
        opacity: 0
        Behavior on opacity { NumberAnimation { duration: 150 } }
        MouseArea {
            anchors.fill: parent
            onClicked: removeFromCollectionWorker.sendMessage({'spotId': spotId, 'token': token});
        }

        WorkerScript {
                 id: removeFromCollectionWorker
                 source: "../js/RemoveFromCollection.js"
                 onMessage: {
                     G.log("Removed: " + messageObject.removed);
                     buttonAddToCollection.opacity = 1;
                     buttonRemoveFromCollection.opacity = 0;
                     spotsList.model.setProperty(index, "spotInCollection", false);
                 }
             }
    }


}


